<template>
  <div class="container">
    <div v-if="bottomShow" class="bottomButton">
      <!-- 指点飞行按钮 -->
      <div
        v-if="order_query_auth && order_create_auth && bottomState === 1"
        class="flightBtn"
        :class="ticketLineStatus ? 'flightBtnClose' : 'flightBtnStart'"
        @click="flightBtnClick(!ticketLineStatus)"
      />

      <!-- 拾取按钮 -->
      <div
        v-else-if="search_photo_query_auth && bottomState === 2"
        class="pickBtn"
        :class="{ active: pickFlag === true }"
        @click="pickBtnClick"
      />
    </div>
    <!-- 机巢列表（按状态分类） -->
    <div v-show="nestWrapShow" class="nestBtn_wrap">
      <!--在线-->
      <el-popover
        ref="zaixian"
        placement="top"
        popper-class="mytooltip"
        :visible-arrow="false"
        :enterable="true"
        :disabled="activeStatus.online.count === 0"
        trigger="click"
        @hide="clearListStatus()"
      >
        <div class="nestList_wrap" @click="closePopover($event, 'zaixian')">
          <div class="nestList">
            <div @click.stop="" class="change_switch">
              <span>图层</span>
              <el-switch
                class="switchbtn"
                active-color="#13ce66"
                inactive-color="#cccccc"
                v-model="switchzaixian"
                style="zoom: 0.7"
                @change="changeSwitchzaixian($event, 'zaixian')"
              >
              </el-switch>
            </div>
            <div
              v-for="area in activeStatus.online.areaList"
              @click.stop="areaClick(area)"
            >
              <div class="area_item">
                <span class="area_name">{{ area[0].areaName }}</span>
                <span class="area_num">共 {{ area.length }} 台</span>
                <svg-icon
                  v-if="listStatus[area[0].areaName]"
                  class="area_icon"
                  icon-class="icon_show"
                />
                <svg-icon v-else class="area_icon" icon-class="icon_hide" />
              </div>
              <div v-show="listStatus[area[0].areaName]" class="nest_wrap">
                <div v-for="item in area" @click.stop="openNestWindow(item)">
                  <div class="nestItem" :title="item.nest_name">
                    <svg-icon class="iccon" icon-class="message" />
                    <div>{{ item.nest_name }}</div>
                    <svg-icon
                      class="iccon"
                      icon-class="navigate"
                      @click.stop="flyNest(item)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-button slot="reference" class="nestBtn onlinestatus"
          ><span>在线: {{ activeStatus.online.count }}</span>
        </el-button>
      </el-popover>
      <!--工作中-->
      <el-popover
        ref="gongzuo"
        placement="top"
        popper-class="mytooltip"
        :visible-arrow="false"
        :enterable="true"
        :disabled="activeStatus.flying.count === 0"
        trigger="click"
        @hide="clearListStatus()"
      >
        <div class="nestList_wrap" @click="closePopover($event, 'gongzuo')">
          <div class="nestList">
            <div @click.stop="" class="change_switch">
              <span>图层 </span>
              <el-switch
                class="switchbtn"
                active-color="#13ce66"
                inactive-color="#cccccc"
                v-model="switchgongzuo"
                style="zoom: 0.7"
                @change="changeSwitchgongzuo($event, 'gongzuo')"
              >
              </el-switch>
            </div>
            <div
              v-for="area in activeStatus.flying.areaList"
              @click.stop="areaClick(area)"
            >
              <div class="area_item">
                <span class="area_name">{{ area[0].areaName }}</span>
                <span class="area_num">共 {{ area.length }} 台</span>
                <svg-icon
                  v-if="listStatus[area[0].areaName]"
                  class="area_icon"
                  icon-class="icon_show"
                />
                <svg-icon v-else class="area_icon" icon-class="icon_hide" />
              </div>
              <div v-show="listStatus[area[0].areaName]" class="nest_wrap">
                <div v-for="item in area" @click.stop="openNest(item)">
                  <div class="nestItem" :title="item.nest_name">
                    <svg-icon class="iccon" icon-class="message" />
                    <div>{{ item.nest_name }}</div>
                    <svg-icon
                      class="iccon"
                      icon-class="navigate"
                      @click.stop="flyNest(item)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-button slot="reference" class="nestBtn workingstatus"
          ><span>工作中: {{ activeStatus.flying.count }}</span>
        </el-button>
      </el-popover>
      <!--离线-->
      <el-popover
        ref="lixian"
        placement="top"
        popper-class="mytooltip"
        :visible-arrow="false"
        :enterable="true"
        :disabled="activeStatus.offline.count === 0"
        trigger="click"
        @hide="clearListStatus()"
      >
        <div class="nestList_wrap" @click="closePopover($event, 'lixian')">
          <div class="nestList">
            <div @click.stop="" class="change_switch">
              <span>图层 </span>
              <el-switch
                class="switchbtn"
                active-color="#13ce66"
                inactive-color="#cccccc"
                v-model="switchlixian"
                style="zoom: 0.7"
                @change="changeSwitchlixian($event, 'lixian')"
              >
              </el-switch>
            </div>
            <div
              v-for="(area, index) in activeStatus.offline.areaList"
              :key="index"
              @click.stop="areaClick(area)"
            >
              <div class="area_item">
                <span class="area_name">{{ area[0].areaName }}</span>
                <span class="area_num">共 {{ area.length }} 台</span>
                <svg-icon
                  v-if="listStatus[area[0].areaName]"
                  class="area_icon"
                  icon-class="icon_show"
                />
                <svg-icon v-else class="area_icon" icon-class="icon_hide" />
              </div>
              <div v-show="listStatus[area[0].areaName]" class="nest_wrap">
                <div v-for="item in area" @click.stop="openNestWindow(item)">
                  <div class="nestItem" :title="item.nest_name">
                    <svg-icon class="iccon" icon-class="message" />
                    <div>{{ item.nest_name }}</div>
                    <svg-icon
                      class="iccon"
                      icon-class="navigate"
                      @click.stop="flyNest(item)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-button slot="reference" class="nestBtn offLinestatus"
          ><span>离线: {{ activeStatus.offline.count }}</span>
        </el-button>
      </el-popover>
      <!--异常-->
      <el-popover
        ref="yichang"
        placement="top"
        popper-class="mytooltip"
        :visible-arrow="false"
        :enterable="true"
        :disabled="activeStatus.abnormal.count === 0"
        trigger="click"
        @hide="clearListStatus()"
      >
        <div class="nestList_wrap" @click="closePopover($event, 'yichang')">
          <div class="nestList">
            <div @click.stop="" class="change_switch">
              <span>图层 </span>
              <el-switch
                class="switchbtn"
                active-color="#13ce66"
                inactive-color="#cccccc"
                v-model="switchyichang"
                style="zoom: 0.7"
                @change="changeSwitchyichang($event, 'yichang')"
              >
              </el-switch>
            </div>
            <div
              v-for="(area, index) in activeStatus.abnormal.areaList"
              :key="index"
              @click.stop="areaClick(area)"
            >
              <div class="area_item">
                <span class="area_name">{{ area[0].areaName }}</span>
                <span class="area_num">共 {{ area.length }} 台</span>
                <svg-icon
                  v-if="listStatus[area[0].areaName]"
                  class="area_icon"
                  icon-class="icon_show"
                />
                <svg-icon v-else class="area_icon" icon-class="icon_hide" />
              </div>
              <div v-show="listStatus[area[0].areaName]" class="nest_wrap">
                <div v-for="item in area" @click.stop="openNestWindow(item)">
                  <div class="nestItem" :title="item.nest_name">
                    <svg-icon class="iccon" icon-class="message" />
                    <div>{{ item.nest_name }}</div>
                    <svg-icon
                      class="iccon"
                      icon-class="navigate"
                      @click.stop="flyNest(item)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-button slot="reference" class="nestBtn errorstatus"
          ><span>异常: {{ activeStatus.abnormal.count }}</span>
        </el-button>
      </el-popover>
      <!--维保-->
      <el-popover
        ref="weibao"
        placement="top"
        popper-class="mytooltip"
        :visible-arrow="false"
        :enterable="true"
        :disabled="activeStatus.maintenance.count === 0"
        trigger="click"
        @hide="clearListStatus()"
      >
        <div class="nestList_wrap" @click="closePopover($event, 'weibao')">
          <div class="nestList">
            <div @click.stop="" class="change_switch">
              <span>图层 </span>
              <el-switch
                class="switchbtn"
                active-color="#13ce66"
                inactive-color="#cccccc"
                v-model="switchweibao"
                style="zoom: 0.7"
                @change="changeSwitchweibao($event, 'weibao')"
              >
              </el-switch>
            </div>
            <div
              v-for="(area, index) in activeStatus.maintenance.areaList"
              :key="index"
              @click.stop="areaClick(area)"
            >
              <div class="area_item">
                <span class="area_name">{{ area[0].areaName }}</span>
                <span class="area_num">共 {{ area.length }} 台</span>
                <svg-icon
                  v-if="listStatus[area[0].areaName]"
                  class="area_icon"
                  icon-class="icon_show"
                />
                <svg-icon v-else class="area_icon" icon-class="icon_hide" />
              </div>
              <div v-show="listStatus[area[0].areaName]" class="nest_wrap">
                <div v-for="item in area" @click.stop="openNestWindow(item)">
                  <div class="nestItem" :title="item.nest_name">
                    <svg-icon class="iccon" icon-class="message" />
                    <div>{{ item.nest_name }}</div>
                    <svg-icon
                      class="iccon"
                      icon-class="navigate"
                      @click.stop="flyNest(item)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-button slot="reference" class="nestBtn servicestatus"
          ><span>维保: {{ activeStatus.maintenance.count }}</span>
        </el-button>
      </el-popover>
    </div>
    <div class="earthControl" v-if="buttonBoxAuth">
      <img src="@/assets/bottom_left.png" alt="" class="box_left" />
      <img src="@/assets/bottom_right.png" alt="" class="box_right" />
      <div class="controlContent">
        <div
          class="flyBtn btnBorderCom flying"
          :class="{ active: isUavShow === true }"
          @click="openUavLayer"
          v-if="false && layer_aircraft_auth"
        >
          无人机
        </div>
        <div
          class="changeBtn btnBorderCom flying"
          :class="{ active: isKongyuShow === true }"
          @click="openKyLayer"
          v-if="layer_airspace_auth"
        >
          空域
        </div>
        <div
          class="earthBtn btnBorderCom flying"
          :class="{ active: isQuanjingShow === true }"
          @click="openQjLayer"
          v-if="layer_panorama_auth"
        >
          全景
        </div>
        <div
          class="layerBtn btnBorderCom flying"
          :class="{ active: isModelShow === true }"
          @click="openSwLayer"
          v-if="layer_three_d_auth"
        >
          三维
        </div>
        <div
          class="layerBtn btnBorderCom flying"
          :class="{ active: isMapShow === true }"
          @click="openEwLayer"
          v-if="layer_orthophoto_auth"
        >
          正射
        </div>

        <el-popover
          placement="top"
          popper-class="mytooltip2"
          :visible-arrow="false"
          :enterable="true"
          trigger="click"
        >
          <div class="layerContent">
            <div
              class="nestList_wrap"
              style="align-items: center; justify-content: center"
            >
              <div class="layerList">
                <template v-for="(item, index) in layerLists">
                  <div
                    :key="index"
                    class="layerItem"
                    :class="{ active: item.show === true }"
                    @click="openLayer(item.id, !item.show)"
                    v-if="layerAuthShow(item)"
                  >
                    {{ item.name }}
                  </div>
                </template>
              </div>
            </div>
            <div class="cityLayer">
              <CityLayerBox
                v-show="cityLayerBoxShow"
                :layerLists="layerLists"
              ></CityLayerBox>
            </div>
          </div>
          <div
            slot="reference"
            class="layerBtn btnBorderCom flying"
            v-if="
              layer_inspection_area_auth ||
              layer_cluster_issue_auth ||
              layer_position_issue_auth ||
              layer_road_map_auth ||
              layer_roi_map_auth
            "
          >
            图层
          </div>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script>
import { getselfMarks, getselfPolygon2 } from "@/api/kanban";

import CityLayerBox from "./bottomComponents/cityLayerTool.vue";
import store from "@/store";

var aircraftDataSource = null; // 无人机
var kongyuDataSource = null; // 空域
var quanjingDataSource = null; // 全景
var sanweiDataSource = null; // 三维
var erweiDataSource = null; // 正射
var lastQjMark = null; // 上一个全景图层
var showLayerList = []; // 显影图层
var showBillBoardCollectionLayerList = []; // 显影图层

const groupBy = (array, f) => {
  const groups = {};
  array.forEach(function (o) {
    const group = JSON.stringify(f(o));
    groups[group] = groups[group] || [];
    groups[group].push(o);
  });
  return Object.keys(groups).map(function (group) {
    return groups[group];
  });
};

const arrayGroupBy = (list, groupId) => {
  return groupBy(list, function (item) {
    return [item[groupId]];
  });
};

export default {
  name: "Bottom",
  components: { CityLayerBox },
  props: {
    ticketLineStatus: {
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      userAuthor: null,
      timer1: null,
      activeStatus: {
        abnormal: { count: 0, list: [] },
        offline: { count: 0, list: [] },
        online: { count: 0, list: [] },
        flying: { count: 0, list: [] },
        maintenance: { count: 0, list: [] },
      },
      listStatus: {}, // 列表展开状态
      isUavShow: false, // 无人机
      isKongyuShow: false, // 空域
      isQuanjingShow: false, // 全景
      isModelShow: false, // 三维
      isMapShow: false, // 正射
      layerLists: [
        {
          id: 999,
          name: "配置区块",
          show: false,
          author: "land",
        },
        {
          id: 1,
          name: "巡检区域",
          show: true,
          author: "inspection_area",
        },
        {
          id: 2,
          name: "问题聚类",
          show: true,
          author: "cluster_issue",
        },
        {
          id: 3,
          name: "问题点位",
          show: true,
          author: "position_issue",
        },
        {
          id: 4,
          name: "路网地名",
          show: true,
          author: "road_map",
          have_auth: true,
        },
        {
          id: 5,
          name: "行政区划",
          show: true,
          author: "roi_map",
          have_auth: true,
        },
      ],

      bottomShow: true, // 按钮显隐
      bottomState: 1, // 0没有 1指点飞行 2时空搜图
      pickFlag: false,

      nestWrapShow: true,

      selectQjMarkId: null, // 选中的全景点位图层
      switchzaixian: true,
      switchgongzuo: true,
      switchlixian: false,
      switchweibao: false,
      switchyichang: false,
      ModuleIndex: 4,

      option: {},
    };
  },
  computed: {
    // 权限
    // 指点任务 显示
    order_query_auth() {
      return this.userAuthor?.order?.query?.have_auth;
    },
    // 指点任务 新建任务
    order_create_auth() {
      return this.userAuthor?.order?.create?.have_auth;
    },
    // 图层导航 显示
    search_photo_query_auth() {
      return this.userAuthor?.search_photo?.query?.have_auth;
    },
    // 底部图层条显示
    buttonBoxAuth() {
      return (
        this.layer_query_auth &&
        (this.layer_aircraft_auth ||
          this.layer_airspace_auth ||
          this.layer_panorama_auth ||
          this.layer_three_d_auth ||
          this.layer_orthophoto_auth ||
          this.layer_inspection_area_auth ||
          this.layer_cluster_issue_auth ||
          this.layer_position_issue_auth ||
          this.layer_roi_map_auth ||
          this.layer_road_map_auth)
      );
    },
    // 图层导航 显示
    layer_query_auth() {
      return this.userAuthor?.layer?.query?.have_auth;
    },
    // 图层导航 无人机
    layer_aircraft_auth() {
      return this.userAuthor?.layer?.aircraft?.have_auth;
    },
    // 图层导航 空域
    layer_airspace_auth() {
      return this.userAuthor?.layer?.airspace?.have_auth;
    },
    // 图层导航 全景
    layer_panorama_auth() {
      return this.userAuthor?.layer?.panorama?.have_auth;
    },
    // 图层导航 三维
    layer_three_d_auth() {
      return this.userAuthor?.layer?.three_d?.have_auth;
    },
    // 图层导航 正射
    layer_orthophoto_auth() {
      return this.userAuthor?.layer?.orthophoto?.have_auth;
    },
    // 图层导航 巡检区域
    layer_inspection_area_auth() {
      return this.userAuthor?.layer?.inspection_area?.have_auth;
    },
    // 图层导航 问题聚类
    layer_cluster_issue_auth() {
      return this.userAuthor?.layer?.cluster_issue?.have_auth;
    },
    // 图层导航 问题定位
    layer_position_issue_auth() {
      return this.userAuthor?.layer?.position_issue?.have_auth;
    },
    // 图层导航 路网地名
    layer_road_map_auth() {
      return this.userAuthor?.layer?.road_map?.have_auth;
    },
    // 图层导航 行政区划
    layer_roi_map_auth() {
      return this.userAuthor?.layer?.roi_map?.have_auth;
    },
    // 区块配置显示
    cityLayerBoxShow() {
      let findLayer = this.layerLists.find((layer) => {
        return layer.id == 999;
      });
      return findLayer.show;
    },
  },

  created() {
    this.userAuthor = store.getters.userAuth;
    this.option = store.getters.kanBanConfig?.option || [];

    console.log("option layerLists", this.option, this.layerLists);

    this.option.forEach((feature) => {
      this.layerLists.forEach((layer) => {
        if (feature.feature == layer.author) {
          layer.show = feature?.isSelect;
        }
      });
    });

    this.$bus.on("changeModuleIndex", (num) => {
      this.ModuleIndex = num;
    });
  },
  mounted() {
    this.initData();
    this.initBus();
  },
  methods: {
    layerAuthShow(item) {
      if (item.id == 999) {
        return true;
      }
      return item.have_auth || this.userAuthor?.layer[item.author]?.have_auth;
    },

    initData() {
      let that = this;
      that.timer1 = setInterval(function () {
        that.fetchData(false);
      }, 60 * 1000);
      that.qjData();
      that.swData();
      that.kyData();
      setTimeout(function () {
        that.inittuceng();
      }, 1000);
      setTimeout(function () {
        that.inittuceng();
      }, 4000);

      console.log("option", that.option);
      that.$nextTick(() => {
        that.option.forEach((feature) => {
          let selectOption = null;
          switch (feature.feature) {
            case "inspection_area":
              break;

            case "cluster_issue":
              selectOption = that.layerLists.find((layer) => {
                return layer.author == feature.feature;
              });
              if (!selectOption) {
                this.$message.warning("未找到配置项");
                console.log("cluster_issue", that.layerLists, feature);
              }
              selectOption.show = feature.isSelect;
              !!QuestionLayer && (QuestionLayer.show = feature.isSelect);
              break;

            case "position_issue":
              selectOption = that.layerLists.find((layer) => {
                return layer.author == feature.feature;
              });
              if (!selectOption) {
                this.$message.warning("未找到配置项");
                console.log("position_issue", that.layerLists, feature);
              }
              console.log(billboardsCollection);
              selectOption.show = feature.isSelect;
              !!billboardsCollection &&
                (billboardsCollection.show = feature.isSelect);
              !!labelCollection && (labelCollection.show = feature.isSelect);

              break;
            default:
              break;
          }
        });
      });
    },
    initBus() {
      let that = this;
      // 全景状态 图层
      that.$bus.on("QJLayerShow", (flag) => {
        if (!flag) {
          // 关闭图层 显示全景 记录
          showLayerList = [];
          showBillBoardCollectionLayerList = [];

          if (that.isUavShow) {
            // 无人机
            aircraftDataSource.show = false;
            showLayerList.push(aircraftDataSource);
          }
          if (that.isKongyuShow) {
            // 空域
            kongyuDataSource.show = false;
            showLayerList.push(kongyuDataSource);
          }
          if (that.isQuanjingShow) {
            // 全景
            quanjingDataSource.hide();
            showBillBoardCollectionLayerList.push(quanjingDataSource);
          }
          if (that.isModelShow) {
            // 三维
            sanweiDataSource.hide();
            showBillBoardCollectionLayerList.push(sanweiDataSource);
          }
          if (that.isMapShow) {
            // 二维
            erweiDataSource.hide();
            showBillBoardCollectionLayerList.push(erweiDataSource);
          }
        } else {
          // 显示图层 关闭全景 回显
          showLayerList.forEach((layer) => {
            layer.show = true;
          });
          showBillBoardCollectionLayerList.forEach((layer) => {
            layer.show();
          });

          showLayerList = [];
          showBillBoardCollectionLayerList = [];
        }
      });

      that.$bus.on("nestStatusListUpdate", (data) => {
        console.log("nestStatusListUpdate", data);
        let nestData = JSON.parse(JSON.stringify(data));
        that.formatNestData(nestData);
        that.changeNestColor(nestData);
      });

      // 显隐机巢覆盖区图层
      that.$bus.on("toggleNestLayer", (flag) => {
        that.openLayer(1, flag);
        setTimeout(function () {
          that.inittuceng();
        }, 1000);
      });

      // 显隐机巢问题图层
      that.$bus.on("toggleIssueLayer", (flag) => {
        that.openLayer(2, flag);
        that.openLayer(3, flag);
      });

      // 显隐机巢状态图层
      that.$bus.on("nestWrapBtnShow", (data) => {
        that.nestWrapShow = data;
      });
    },
    removeBus() {
      this.$bus.$off("QJLayerShow");
      this.$bus.$off("toggleNestLayer");
      this.$bus.$off("toggleIssueLayer");
      this.$bus.$off("nestWrapBtnShow");
      this.$bus.$off("clearQj");
      this.$bus.$off("selectQjMarkId");
    },
    inittuceng() {
      this.activeStatus.offline.switchlixian = this.switchlixian;
      this.activeStatus.offline.type = "lixian";
      this.$bus.emit("AllNestActiveStatus", this.activeStatus.offline);
      this.activeStatus.maintenance.switchweibao = this.switchweibao;
      this.activeStatus.maintenance.type = "weibao";
      this.$bus.emit("AllNestActiveStatus", this.activeStatus.maintenance);
      this.activeStatus.abnormal.switchyichang = this.switchyichang;
      this.activeStatus.abnormal.type = "yichang";
      this.$bus.emit("AllNestActiveStatus", this.activeStatus.abnormal);
    },
    changeSwitchzaixian($event, type) {
      console.log(this.activeStatus);
      this.activeStatus.online.switchzaixian = this.switchzaixian;
      this.activeStatus.online.type = "zaixian";
      this.$bus.emit("AllNestActiveStatus", this.activeStatus.online);
    },
    changeSwitchgongzuo($event, type) {
      console.log(this.activeStatus);
      this.activeStatus.flying.switchgongzuo = this.switchgongzuo;
      this.activeStatus.flying.type = "gongzuo";
      this.$bus.emit("AllNestActiveStatus", this.activeStatus.flying);
    },
    changeSwitchlixian($event, type) {
      this.activeStatus.offline.switchlixian = this.switchlixian;
      this.activeStatus.offline.type = "lixian";
      this.$bus.emit("AllNestActiveStatus", this.activeStatus.offline);
    },
    changeSwitchweibao($event, type) {
      console.log(this.activeStatus.maintenance);
      this.activeStatus.maintenance.switchweibao = this.switchweibao;
      this.activeStatus.maintenance.type = "weibao";
      this.$bus.emit("AllNestActiveStatus", this.activeStatus.maintenance);
    },
    changeSwitchyichang($event, type) {
      console.log(this.activeStatus.abnormal);
      this.activeStatus.abnormal.switchyichang = this.switchyichang;
      this.activeStatus.abnormal.type = "yichang";
      this.$bus.emit("AllNestActiveStatus", this.activeStatus.abnormal);
    },
    pickBtnClick() {
      this.pickFlag = !this.pickFlag;
      this.$bus.emit("ChangePickFlag", this.pickFlag);
      if (!this.pickFlag) {
        this.$bus.emit("closePhoto", false);
      }
      // 防止坐标偏移
      viewer.scene.globe.depthTestAgainstTerrain = true;
    },

    // 开始指点飞行
    flightBtnClick(flag, cl) {
      this.$emit("ticketLineStatusChange", flag);

      // 防止坐标偏移
      viewer.scene.globe.depthTestAgainstTerrain = true;
    },

    openLayer(id, flag) {
      console.log("indexLayer", id, this.layerLists);
      let item = this.layerLists.find((layer) => {
        return layer.id == id;
      });
      if (
        (!this.layer_query_auth ||
          !this.userAuthor?.layer[item.author]?.have_auth) &&
        id != 999
      ) {
        return;
      }
      // 非预警信息中，选择问题相关图层
      if (this.ModuleIndex != 4 && (item.id == 2 || item.id == 3)) {
        return false;
      }
      switch (item.id) {
        case 1:
          item.show = flag;
          this.fetchData(true);
          break;
        case 2:
          item.show = flag;
          QuestionLayer.show = item.show;
          break;
        case 3:
          item.show = flag;
          billboardsCollection.show = item.show;
          labelCollection.show = item.show;
          break;
        case 4:
          item.show = flag;
          CiaTxtLayer.show = item.show;
          break;
        case 5:
          item.show = flag;
          RoiLayer.show = item.show;
          break;
        case 999:
          item.show = flag;

          break;
        default:
          break;
      }
    },
    openKyLayer() {
      if (this.isKongyuShow) {
        this.isKongyuShow = false;
      } else {
        this.isKongyuShow = true;
      }
      kongyuDataSource.show = this.isKongyuShow;
    },
    openQjLayer() {
      if (this.isQuanjingShow) {
        this.isQuanjingShow = false;
        this.$bus.emit("closeQj");
        quanjingDataSource.hide();
      } else {
        this.isQuanjingShow = true;
        quanjingDataSource.show();
      }
    },
    clearQjLayer() {
      this.isQuanjingShow = false;
      quanjingDataSource.hide();
    },
    openSwLayer() {
      if (this.isModelShow) {
        this.isModelShow = false;
        sanweiDataSource.hide();
      } else {
        this.isModelShow = true;
        sanweiDataSource.show();
      }
    },
    openEwLayer() {
      if (this.isMapShow) {
        this.isMapShow = false;
        erweiDataSource.hide();
      } else {
        this.isMapShow = true;
        erweiDataSource.show();
      }
    },
    openUavLayer() {
      if (this.isUavShow) {
        this.isUavShow = false;
      } else {
        this.isUavShow = true;
      }
      aircraftDataSource.show = this.isUavShow;
    },
    kyData() {
      kongyuDataSource = CesiumUtil.CreateLayer("kongyuDataSource");
      this.getLandMark(7);
      this.getLandMark(8);
    },
    getLandMark(type) {
      console.log("getLandMark", type);
      // getselfPolygon({
      let lnglat = [118.69882, 28.927121];
      let radius = 300;
      let blcok = store.getters.kanBanBlock;
      console.log("getLandMark blcok", blcok);
      lnglat = [blcok.lng, blcok.lat];
      let area = 0;
      blcok.region.forEach((land) => {
        let newLand = JSON.parse(land.ar_area);
        console.log("newLand", newLand);
        let landArea = 0;
        if (newLand.type == "Polygon") {
          landArea = turf.area(turf.polygon(newLand.coordinates));
          area += landArea;
        } else if ((newLand.type = "MultiPolygon")) {
          newLand.coordinates.forEach((polygon) => {
            landArea = turf.area(turf.polygon(polygon));
            area += landArea;
          });
        }
      });
      if (!!area) {
        radius = area / 3.14 / 10000000;
      }
      getselfPolygon2({
        polyPoints: [],
        include: "",
        type: type,
        center_point: lnglat,
        radius: "" + radius,
      }).then((res) => {
        var datas = res.data;
        if (datas) {
          for (var i = 0; i < datas.length; i++) {
            if (datas[i].geometry.type == "Polygon") {
              var arr3 = datas[i].geometry.coordinates[0];
              var arr2 = [];
              for (var j = 0; j < arr3.length; j++) {
                arr2.push(arr3[j][0], arr3[j][1]);
              }
              if (datas[i].properties.lmcategory_name == "限高区域") {
                var color = "rgba(255, 170, 0, 0.4)";
                var polygon = {
                  id: datas[i].properties.landmark_id,
                  type: "dx",
                  positions: arr2,
                  clamp: true,
                  color: color,
                };
              } else if (datas[i].properties.lmcategory_name == "禁飞区域") {
                var color = "rgba(255, 0, 0, 0.4)";
                var polygon = {
                  id: datas[i].properties.landmark_id,
                  type: "dx",
                  positions: arr2,
                  clamp: true,
                  color: color,
                };
              } else {
                var color = "rgba(35, 152, 255, 0.8)";
                var polygon = {
                  id: datas[i].properties.landmark_id,
                  type: "dx",
                  positions: arr2,
                  extrudedHeight:
                    datas[i].properties.height > 0
                      ? datas[i].properties.height
                      : 120,
                  color: color,
                };
              }
              CesiumUtil.AddPolygon(polygon, kongyuDataSource);
            }
          }

          let airspace = this.option.find((feature) => {
            return feature.feature == "airspace";
          });
          if (!!airspace) {
            this.isKongyuShow = airspace.isSelect;
            kongyuDataSource.show = airspace.isSelect;
          } else {
            kongyuDataSource.show = false;
          }
        }
      });
    },
    qjData() {
      quanjingDataSource = new CesiumUtil.BillBoardCollectionLayer();
      var icon_ = require("@/assets/icons/quanjing.png");
      var icon_select = require("@/assets/icons/xuanzhongquanjing.png");

      this.$bus.on("clearQj", () => {
        this.clearQjLayer();
      });
      this.$bus.on("selectQjMarkId", (data) => {
        this.selectQjMarkId = data;
      });

      getselfMarks({
        type: 10,
        dept_id: store.getters.deptId,
      }).then((res) => {
        var items = res.data;
        if (items) {
          store.commit("room/set_qj_data", items);
          var marks = [];
          for (var i = 0; i < items.length; i++) {
            var mark = {
              id: items[i].mark_id + "_qj",
              type: "quanjing",
              // name: items[i]["name"],
              longitude: items[i]["position"][0],
              latitude: items[i]["position"][1],
              height: 5,
              scale: 0.7,
              distanceShow: [100, 100000],
              icon: icon_,
              properties: {
                scenes: items[i]["scenes"],
              },
            };
            quanjingDataSource.add(mark);
          }

          let panorama = this.option.find((feature) => {
            return feature.feature == "panorama";
          });
          if (!!panorama) {
            this.isQuanjingShow = panorama.isSelect;
            if (panorama.isSelect) {
              quanjingDataSource.show();
            } else {
              quanjingDataSource.hide();
            }
          } else {
            quanjingDataSource.hide();
          }
        } else {
          store.commit("room/set_qj_data", []);
        }
      });
      // 全景图层
      this.$bus.on("getQjMark", (id) => {
        const QjMark = quanjingDataSource.get(id + "_qj");
        if (QjMark) {
          if (lastQjMark !== QjMark) {
            if (lastQjMark) {
              lastQjMark.scale = 0.8;
              lastQjMark.image = icon_;
            }
            QjMark.scale = 1.0;
            QjMark.image = icon_select;
            lastQjMark = QjMark;
          }
        } else {
          if (lastQjMark) {
            lastQjMark.scale = 0.8;
            lastQjMark.image = icon_;
          }
        }
      });

      // ! 按钮显隐
      this.$bus.on("bottomButtonShow", (show) => {
        this.bottomShow = show;
        if (!show) {
          this.flightBtnClick(false, true);
        }
      });

      // ! 按钮类型
      this.$bus.on("bottomButtonState", (state) => {
        // 0没有 1指点飞行 2时空搜图
        if (state !== 1) {
          this.flightBtnClick(false, true);
        }
        this.bottomState = state;
      });
    },
    swData() {
      sanweiDataSource = new CesiumUtil.BillBoardCollectionLayer();
      erweiDataSource = new CesiumUtil.BillBoardCollectionLayer();
      getselfMarks({
        type: 9,
        dept_id: store.getters.deptId,
      }).then((res) => {
        var items = res.data;
        if (!items) {
          return false;
        }
        var marks = [];
        store.commit("room/set_sw_data", items);
        for (var i = 0; i < items.length; i++) {
          var flag = 0;
          var scenes = items[i]["scenes"];
          scenes.forEach(function (item, index) {
            if (item["3d"]) {
              flag = 1;
              return;
            }
          });
          if (flag) {
            var icon_ = require("@/assets/icons/model1.png");
          } else {
            var icon_ = require("@/assets/icons/farmland.png");
          }
          var mark = {
            id: items[i].mark_id + "_sw" + (flag ? "_3d" : "_2d"),
            type: "gongdi",
            // name: items[i]["name"],
            longitude: items[i]["position"][0],
            latitude: items[i]["position"][1],
            height: 5,
            scale: 0.7,
            distanceShow: [1000, 100000],
            icon: icon_,
            properties: {
              scenes: items[i]["scenes"],
            },
          };
          if (flag) {
            sanweiDataSource.add(mark);
          } else {
            erweiDataSource.add(mark);
          }
        }
      });
      console.log("three two", this.option);

      let three_d = this.option.find((feature) => {
        return feature.feature == "three_d";
      });
      if (!!three_d) {
        this.isModelShow = three_d.isSelect;
        if (three_d.isSelect) {
          sanweiDataSource.show();
        } else {
          sanweiDataSource.hide();
        }
      } else {
        sanweiDataSource.hide();
      }

      let orthophoto = this.option.find((feature) => {
        return feature.feature == "orthophoto";
      });
      if (!!orthophoto) {
        this.isMapShow = orthophoto.isSelect;
        if (orthophoto.isSelect) {
          erweiDataSource.show();
        } else {
          erweiDataSource.hide();
        }
      } else {
        erweiDataSource.hide();
      }
    },
    fetchData(ifChange) {
      if (ifChange) {
        var entities = NestLayer.entities.values;
        for (var i = 0; i < entities.length; i++) {
          if (entities[i].type == "epllise") {
            let inspectionAreaLayer = this.layerLists.find((layer) => {
              return layer.id == 1;
            });
            entities[i].show = inspectionAreaLayer.show;
          }
        }
      }
    },
    changeNestColor(obj) {
      var entities = NestLayer.entities.values;
      for (let key in obj) {
        var list = obj[key]["list"];
        let color = "rgba(170, 255, 255, 0.15)";
        switch (key) {
          case "abnormal":
            color = "rgba(255, 34, 37, 0.15)";
            break;
          case "offline":
            color = "rgba(81, 81, 81, 0.3)";
            break;
          case "online":
            color = "rgba(170, 255, 255, 0.15)";
            break;
          case "flying":
            color = "rgba(255, 199, 55, 0.15)";
            break;
          case "maintenance":
            color = "rgba(147, 73, 221, 0.3)";
            break;
          default:
            color = "rgba(170, 255, 255, 0.15)";
            break;
        }
        for (var i = 0; i < list.length; i++) {
          var nest_code = list[i]["nest_code"];
          for (var j = 0; j < entities.length; j++) {
            var code = nest_code + "_epllise";
            if (entities[j].id == code) {
              entities[j].ellipse.material =
                Cesium.Color.fromCssColorString(color);
            }
          }
        }
      }
    },
    openNest(item) {
      this.$parent.$refs.newEarthComp.closeNestWindow();
      this.$emit("openNest", [item, true]);
      if (this.isUavShow) {
        this.openUavLayer();
      }
      this.$refs["gongzuo"].doClose();
      console.log(item);
    },
    areaClick(area) {
      // todo 设置高度
      // this.$message('高度' + this.$refs.ref_tooltip_content.offsetHeight)
      const areaName = area[0].areaName;
      this.listStatus[areaName]
        ? (this.listStatus[areaName] = false)
        : (this.listStatus[areaName] = true);
      this.$forceUpdate();
    },
    closePopover(e, ref) {
      if (this.$refs[ref]) {
        this.$refs[ref].doClose();
      }
    },
    clearListStatus() {
      this.listStatus = {};
    },
    setListStatus() {
      this.listStatus = {};
    },
    openNestWindow(nest) {
      console.log("bottom nest_state", nest);
      var nest_entity = NestLayer.entities.getById(nest.nest_code);

      const nestList = store.getters.nestList;
      var nestInfo = nestList.filter((item) => {
        return item.nest_code === nest.nest_code;
      })[0];

      var that = this;
      CesiumUtil.FlyToElementByGPS({
        longitude: nestInfo.position.longitude,
        latitude: nestInfo.position.latitude,
        height: nestInfo.position.altitude,
        distance: 3000,
        callback: function () {
          console.log(nest_entity);
          that.$bus.emit("OpenNestWindow", nest_entity);
        },
      });
    },
    flyNest(nest) {
      const nestList = store.getters.nestList;
      var nestInfo = nestList.filter((item) => {
        return item.nest_code === nest.nest_code;
      })[0];
      CesiumUtil.FlyToElementByGPS({
        longitude: nestInfo.position.longitude,
        latitude: nestInfo.position.latitude,
        height: nestInfo.position.altitude,
        distance: 800,
      });
    },
    formatNestData(data) {
      const reg = /[0-9]+/g;
      Object.keys(data).map((item) => {
        // 生成areaName
        for (let i = 0; i < data[item].list.length; i++) {
          let areaName;
          const strArr = data[item].list[i].city.split(/-|－/);
          if (strArr.length < 2) {
            areaName = "其他";
          } else {
            areaName = strArr[2].replace(reg, "").trim();
          }
          data[item].list[i].areaName = areaName;
        }
        // 通过areaName分组,并把“其他放在最后”
        data[item].areaList = arrayGroupBy(data[item].list, "areaName");
        // 把“其他“放在最后
        let index = -1;
        for (let i = 0; i < data[item].areaList.length; i++) {
          if (data[item].areaList[i][0].areaName === "其他") {
            index = i;
          }
        }
        if (index !== -1) {
          const end = data[item].areaList.splice(index, 1);
          data[item].areaList.push(end[0]);
        }
      });
      if (!this.showTooltip) {
        // 判断工作机巢变化情况，通知view2刷新列表
        this.handleNestChange(data, this.activeStatus);
        this.activeStatus = data;
      }
    },
    handleNestChange(newVal, oldVal) {
      let nestChanged = false;
      //
      const newWorkList = newVal["flying"].list;
      const oldWorkList = oldVal["flying"].list;
      if (!newWorkList && !oldWorkList) {
        nestChanged = true;
      } else if (newWorkList && oldWorkList) {
        if (newWorkList.length !== oldWorkList.length) {
          nestChanged = false;
        }
        newWorkList.forEach((newItem) => {
          let hasSameNest = false;
          oldWorkList.forEach((oldItem) => {
            if (newItem.nest_code === oldItem.nest_code) {
              hasSameNest = true;
            }
          });
          if (!hasSameNest) {
            nestChanged = false;
          }
        });
        nestChanged = true;
      } else {
        nestChanged = false;
      }
      //
      if (nestChanged) {
        this.$bus.emit("work_nest_change");
      }
    },
    //
    workingChange(newVal, oldVal) {
      if (!oldVal) return;
      if (newVal.count !== oldVal.count) {
        this.$bus.emit("flight_working_change");
        return null;
      }
      //
      const arr = oldVal.list.map((item) => {
        return item.nest_code;
      });
      for (let i = 0; i < newVal.list.length; i++) {
        const nestCode = newVal.list[i].nest_code;
        if (arr.indexOf(nestCode) === -1) {
          this.$bus.emit("flight_working_change");
          return null;
        }
      }
    },
  },
  watch: {
    "activeStatus.flying": {
      handler(newVal, oldVal) {
        // count:1
        // list:Array(1)
        // 0:nest_code:"35a4d026-cdc1-4472-9c1f-8c21587717f2"
        // nest_name:"龙游04-湖镇01-政府楼"
        // if (newVal.list)
        this.workingChange(newVal, oldVal);
      },
      immediate: true,
    },
  },
  beforeDestroy() {
    clearInterval(this.timer1);
    this.timer1 = null;
    this.removeBus();
  },
};
</script>
<style lang="scss">
.mytooltip2 {
  background-color: rgba(5, 29, 40, 0);
  box-shadow: none;
}

.mytooltip {
  background-color: rgba(5, 29, 40, 0);
  min-width: 150px;
  height: 300px;
  box-shadow: none;
}

::-webkit-scrollbar {
  display: none;
}

.nestList_wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.layerContent {
  position: relative;
  .layerList {
    border: rgba(0, 255, 255, 0.3) 2px solid;
    border-radius: 4px;
    overflow-y: scroll;
    cursor: pointer;
    .layerItem {
      color: white;
      font-size: 14px;
      line-height: 16px;
      cursor: pointer;
      margin-bottom: 3px;
      padding: 5px 12px;
      border: 1px solid #1cc1ff;

      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      &.active {
        background-color: rgba(85, 170, 255, 0.5);
      }
    }
  }
  .cityLayer {
    position: absolute;
    top: 0;
    left: 110px;
  }
}
.nestList {
  border: rgba(0, 255, 255, 0.3) 2px solid;
  border-radius: 4px;
  overflow-y: scroll;
  cursor: pointer;
  .change_switch {
    line-height: 25px;
    padding: 3px 5px;
    background-color: rgba(5, 29, 40, 1);
    display: flex;
    color: #ffffff;
    > span {
      padding: 2px 10px 0 0;
    }
    .switchbtn {
      margin-top: 9px;
    }
  }
  .area_item {
    background-color: rgba(5, 29, 40, 0.8);
    display: flex;
    width: 100%;
    min-width: 190px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 3px 5px;
    cursor: pointer;

    &:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }

    .area_name {
      color: #cccccc;
    }

    .area_num {
      flex: 1;
      margin-right: 40px;
      text-align: right;
      color: grey;
    }

    .area_icon {
      margin-right: 5px;
    }

    .area_name_show {
      color: ghostwhite !important;
    }

    .area_num_show {
      color: ghostwhite !important;
    }
  }

  .area_item_show {
    background-color: rgba(5, 29, 40, 0.6);
  }

  .nest_wrap {
    padding: 3px 5px;
    background-color: rgba(5, 29, 40, 0.4);

    .nestItem {
      color: white;
      font-size: 12px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      border: rgba(59, 111, 184, 0.7) 1px solid;

      border-radius: 4px;
      padding: 4px;
      margin: 2px 0;

      &:hover {
        background-color: rgba(0, 0, 0, 0.8);
      }

      & > div {
        width: 120px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: 0 6px;
        text-align: left;
      }

      & > .iccon {
        font-size: 15px;
        margin-left: 3px;
        float: right;

        &:hover {
          color: cyan;
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
* {
  caret-color: transparent;
}

.container {
  width: 100%;

  .bottomButton {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);

    .pickBtn {
      display: flex;
      width: 500px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: 0 0;
      background-position: 100% 100%;
      justify-content: center;
      font-size: 12px;
      z-index: 20;
      height: 90px;
      opacity: 0.8;
      background-image: url("~@/assets/posPick2.png");
      cursor: pointer;

      &:hover {
        background-color: rgba(255, 255, 127, 0.1);
      }

      &.active {
        opacity: 1;
        background-image: url("~@/assets/posPickCancel.png");
        background-color: rgba(255, 255, 127, 0.1);
      }
    }

    .flightBtn {
      display: flex;
      justify-content: center;
      width: 500px;
      height: 90px;
      // line-height: 50px;
      text-align: center;
      font-size: 12px;
      z-index: 20;
      opacity: 0.8;
      cursor: pointer;

      &:hover {
        background-color: rgba(255, 255, 127, 0.1);
      }

      &.flightBtnStart {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: 0 0;
        background-position: 100% 100%;
        background-image: url("~@/assets/flight1.png");
        // &:hover {
        //   background-color: rgba(255, 255, 127, 0.1);
        // }
      }

      &.flightBtnClose {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: 0 0;
        background-position: 100% 100%;
        background-image: url("~@/assets/flight.png");

        span {
          color: #fff;
        }

        .el-button ::v-deep {
          background-color: #ffff00;
          color: #000;
          margin-left: 5px;
        }
      }
    }
  }

  .nestBtn_wrap {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    padding: 8px 0;
    width: 360px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    background-position: 100% 100%;
    justify-content: center;
    font-size: 12px;
    z-index: 20;
    background-image: radial-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));

    .nestBtn {
      cursor: pointer;
      padding: 4px 8px;
      font-size: 12px;
      border: 1px solid hsla(0, 0%, 100%, 0.4);
      color: hsla(0, 0%, 100%, 0.4);
      background: hsla(0, 0%, 100%, 0.1);
      margin-left: 8px;
      border-radius: 6px;

      &.onlinestatus {
        color: #1cc1ff;
        border: 1px solid #1cc1ff;
        background: rgba(82, 218, 255, 0.1);
      }

      &.workingstatus {
        color: #fd0;
        border: 1px solid #fd0;
        background: rgba(255, 255, 0, 0.1);
      }

      &.offLinestatus {
        color: #fff;
        border: 1px solid #fff;
        background: rgba(255, 255, 255, 0.1);
      }

      &.errorstatus {
        color: #ef2100;
        border: 1px solid #ef2100;
        background: rgba(255, 0, 0, 0.1);
      }

      &.servicestatus {
        color: #bb78ff;
        border: 1px solid #bb78ff;
        background: rgba(170, 85, 255, 0.1);
      }
    }
  }

  .earthControl {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    height: 35px;
    padding: 0 64px;
    box-sizing: border-box;
    z-index: 20;

    .box_left {
      position: absolute;
      left: -1px;
      top: 0;
      height: 100%;
    }

    .box_right {
      position: absolute;
      right: 0px;
      top: 0;
      height: 100%;
    }

    .controlContent {
      height: 100%;
      color: white;
      background-repeat: repeat-x;
      background-size: contain;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      box-sizing: border-box;
      background-image: url("~@/assets/bottom_center.png");

      .flyBtn,
      .changeBtn,
      .earthBtn,
      .layerBtn {
        min-width: 80px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 2px 10px;
        margin: 0 8px;
        box-sizing: border-box;
        cursor: pointer;
        white-space: nowrap;
        border-radius: 4px;
      }

      .btnBorderCom {
        border: 1px solid #1cc1ff;
        border-image-slice: 4 4 4 4;
        border-image-width: 4px 4px 4px 4px;
        border-image-repeat: repeat;
        padding: 1px;
        box-sizing: border-box;

        &.active {
          background-color: rgba(85, 170, 255, 0.5);
        }

        &.readOnly {
          pointer-events: none;
          border: 1px solid #9c9c9c;
          background-color: rgba(218, 218, 218, 0.1);
        }
      }
    }
  }
}
</style>
